<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <title>填写发货订单</title>
    <!-- Bootstrap core CSS -->
    <link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body style="background: #f6f6f6">
<nav th:replace="~{front/log/log_topbar::top}"></nav>
<div class="container" style="margin-top: 80px; background: #ffffff">
    <form method="post" action="/order_send_after">
        <input id="orderClient" hidden="hidden" name="orderClient">
        <div id="XianLuXinXi" style="margin-left: 40px; margin-top: 20px; margin-bottom: 20px; background: #ffffff;">
            <span style="font-weight: bold; font-size: 18px">线路信息</span>
            <p>
                <span style="font-size: 16px;">出发地:</span>&nbsp;
                <select style="width: 120px; height: 34px; border-radius: 4px; border: 1px solid #b6bec5" name="orderResProvince" id="province1">
                    <option th:text="${route.routeResourceProvince}" th:value="${route.routeResourceProvince}">请选择</option>
                </select>
                <select style="width: 120px; height: 34px; border-radius: 4px; border: 1px solid #b6bec5" name="orderResCity" id="city1">
                    <option th:text="${route.routeResourceCity}" th:value="${route.routeResourceCity}">请选择</option>
                </select>
                <select style="width: 120px; height: 34px; border-radius: 4px; border: 1px solid #b6bec5" name="orderResCountry" id="country1">
                    <option th:text="${route.routeResourceCountry}" th:value="${route.routeResourceCountry}">请选择</option>
                </select>
                <span style="margin-left: 100px;font-size: 16px">街道/门牌号:</span>&nbsp;
                <input style="width: 400px;display: inline-block;" type="text" name="orderResAddress" class="form-control" id="orderResAddress" placeholder="详细街道地址（可不填）">
            </p>
            <p>
                <span style="font-size: 16px;">到达地:</span>&nbsp;
                <select style="width: 120px; height: 34px; border-radius: 4px; border: 1px solid #b6bec5" name="orderDesProvince" id="province2">
                    <option th:text="${route.routeDestinationProvince}" th:value="${route.routeDestinationProvince}">请选择</option>
                </select>
                <select style="width: 120px; height: 34px; border-radius: 4px; border: 1px solid #b6bec5" name="orderDesCity" id="city2">
                    <option th:text="${route.routeDestinationCity}" th:value="${route.routeDestinationCity}">请选择</option>
                </select>
                <select style="width: 120px; height: 34px; border-radius: 4px; border: 1px solid #b6bec5" name="orderDesCountry" id="country2">
                    <option th:text="${route.routeDestinationCountry}" th:value="${route.routeDestinationCountry}">请选择</option>
                </select>
                <span style="margin-left: 100px;font-size: 16px">街道/门牌号:</span>&nbsp;
                <input style="width: 400px;display: inline-block;" type="text" name="orderDesAddress" class="form-control" id="orderDesAddress" placeholder="详细街道地址（可不填）">
            </p>
        </div>
        <hr>
        <div id="HuoWuXinXi" style="margin-left: 40px; margin-top: 20px; margin-bottom: 20px; background: #ffffff;">
            <span style="font-weight: bold; font-size: 18px">货物信息</span>
            <table class="table table-bordered" style="border: 2px solid #dddddd">
                <thead>
                <tr>
                    <th style="font-weight: normal;text-align: center">货物名称</th>
                    <th style="font-weight: normal;text-align: center">总件数</th>
                    <th style="font-weight: normal;text-align: center">预估重量</th>
                    <th style="font-weight: normal;text-align: center">预估体积</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <th style="text-align: center;font-weight: normal"><input name="orderGoodsName" type="text" style="width: 100px"></th>
                    <th style="text-align: center;font-weight: normal"><input name="orderGoodsNum" type="text" style="width: 100px"></th>
                    <th style="text-align: center;font-weight: normal"><input name="orderGoodsWeight" placeholder="**吨/**公斤" type="text" style="width: 100px"></th>
                    <th style="text-align: center;font-weight: normal"><input name="orderGoodsCapacity" placeholder="**立方" type="text" style="width: 100px"></th>
                </tr>
                </tbody>
            </table>
            <p>
                <input name="orderRemarks" type="text" style="width: 500px; height: 34px;" placeholder="请填写其他需求，如带包装、需冷藏等">
            </p>
        </div>
        <hr>
        <div id="WuLiuGongSi" style="margin-left: 40px; margin-top: 20px; margin-bottom: 20px; background: #ffffff">
            <span style="font-weight: bold; font-size: 18px">物流公司</span>
            <table class="table table-bordered" style="border: 2px solid #dddddd">
                <thead>
                <tr>
                    <th style="font-weight: normal;text-align: center">承运商</th>
                    <th style="font-weight: normal;text-align: center">重货价格</th>
                    <th style="font-weight: normal;text-align: center">轻货价格</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <th style="text-align: center;font-weight: normal"><a target="_blank" style="text-decoration: none" th:text="${route.routeCompany}" th:href="@{'/com_detail_material?companyName='+${route.routeCompany}}"></a></th>
                    <th style="text-align: center;font-weight: normal"><span th:text="${route.routePriceHeavy}" style="width: 100px"></span></th>
                    <th style="text-align: center;font-weight: normal"><span th:text="${route.routePriceLight}" style="width: 100px"></span></th>
                </tr>
                </tbody>
            </table>
            <input hidden="hidden" name="orderCom" th:value="${route.routeCompany}">
        </div>
        <hr>
        <div id="LianXiFangShi" style="margin-left: 40px; margin-top: 20px; margin-bottom: 20px; background: #ffffff">
            <span style="font-weight: bold; font-size: 18px">联系方式</span>
            <p>
                <span style="font-size: 16px;">发货人:</span>&nbsp;
                <input style="width: 180px;display: inline-block;" type="text" name="orderSendPerson" class="form-control" id="orderSendPerson">
                <span style="font-size: 16px; margin-left: 200px;">发货人手机:</span>&nbsp;
                <input style="width: 250px;display: inline-block;" type="text" name="orderSendPersonPhone" class="form-control" id="orderSendPersonPhone">
            </p>
            <p>
                <span style="font-size: 16px;">收货人:</span>&nbsp;
                <input style="width: 180px;display: inline-block;" type="text" name="orderReceivePerson" class="form-control" id="orderReceivePerson">
                <span style="font-size: 16px; margin-left: 200px;">收货人手机:</span>&nbsp;
                <input style="width: 250px;display: inline-block;" type="text" name="orderReceivePersonPhone" class="form-control" id="orderReceivePersonPhone">
            </p>
        </div>
        <div style="text-align: center; margin-top: 20px; margin-bottom: 20px;"><button type="submit" style="width: 150px" class="btn btn-primary">立即发布</button></div>
    </form>
</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../jquery-3.3.1.js"></script>
<script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script>
    $(function () {
        $("#p1").removeClass("active");
        $("#p2").addClass("active");
        $("#p3").removeClass("active");
        $("#p4").removeClass("#active");
    })
</script>
<script>
    $("#orderClient").val($("#nowClient").text());
</script>

<!--<script>-->
    <!--//出发地-->
    <!--$(function () {-->
        <!--ProvinceBind1();-->

        <!--$("#province1").change(function () {-->
            <!--CityBind1();-->
        <!--})-->

        <!--$("#city1").change(function () {-->
            <!--CountryBind1();-->
        <!--})-->
    <!--})-->
    <!--function ProvinceBind1() {-->
        <!--// $("#province1").html("");-->
        <!--var str = "<option> 请选择省 </option>";-->
        <!--$.ajax({-->
            <!--url: "/getProvince",-->
            <!--success: function (data) {-->
                <!--$.each(data.data, function (i,item) {-->
                    <!--str += "<option value=" + item.cityName + ">" + item.cityName + "</option>";-->
                <!--})-->
                <!--$("#province1").append(str);-->
            <!--},-->
            <!--error: function () {-->
                <!--alert("Error省");-->
            <!--}-->
        <!--})-->
    <!--}-->

    <!--function CityBind1() {-->
        <!--$("#city1").html("");-->
        <!--var options = $("#province1 option:selected");-->
        <!--var province = options.val();//province为选中省份的cityName-->
        <!--// alert(province);-->
        <!--if (province == "")-->
            <!--return ;-->
        <!--$("#city1").html("");-->
        <!--var str="<option> 请选择市 </option>";-->

        <!--$.ajax({-->
            <!--url: "/getCities",-->
            <!--data: {"parentCity": province},-->
            <!--success: function (data) {-->
                <!--$.each(data.data, function (i, item) {-->
                    <!--str += "<option value=" + item.cityName + ">" + item.cityName + "</option>";-->
                <!--});-->
                <!--$("#city1").append(str);-->
            <!--},-->
            <!--error: function () {-->
                <!--alert("Error市");-->
            <!--}-->
        <!--});-->
    <!--}-->

    <!--function CountryBind1() {-->
        <!--$("#country1").html("");-->
        <!--var options = $("#city1 option:selected");-->
        <!--var city = options.val();-->
        <!--if (city == "")-->
            <!--return;-->
        <!--$("#country1").html();-->
        <!--var str="<option> 请选择县 </option>";-->

        <!--$.ajax({-->
            <!--url: "/getCountries",-->
            <!--data: {"parentCity": city},-->
            <!--success: function (data) {-->
                <!--$.each(data.data, function (i, item) {-->
                    <!--str += "<option value=" + item.cityName + ">" + item.cityName + "</option>";-->
                <!--});-->
                <!--$("#country1").append(str);-->
            <!--}-->
        <!--});-->
    <!--}-->

    <!--//到达地-->
    <!--$(function () {-->
        <!--ProvinceBind2();-->

        <!--$("#province2").change(function () {-->
            <!--CityBind2();-->
        <!--})-->

        <!--$("#city2").change(function () {-->
            <!--CountryBind2();-->
        <!--})-->
    <!--})-->
    <!--function ProvinceBind2() {-->
        <!--// $("#province1").html("");-->
        <!--var str = "<option> 请选择省 </option>";-->
        <!--$.ajax({-->
            <!--url: "/getProvince",-->
            <!--success: function (data) {-->
                <!--$.each(data.data, function (i,item) {-->
                    <!--str += "<option value=" + item.cityName + ">" + item.cityName + "</option>";-->
                <!--})-->
                <!--$("#province2").append(str);-->
            <!--},-->
            <!--error: function () {-->
                <!--alert("Error省");-->
            <!--}-->
        <!--})-->
    <!--}-->

    <!--function CityBind2() {-->
        <!--$("#city2").html("");-->
        <!--var options = $("#province2 option:selected");-->
        <!--var province = options.val();//province为选中省份的cityName-->
        <!--// alert(province);-->
        <!--if (province == "")-->
            <!--return ;-->
        <!--$("#city2").html("");-->
        <!--var str="<option> 请选择市 </option>";-->

        <!--$.ajax({-->
            <!--url: "/getCities",-->
            <!--data: {"parentCity": province},-->
            <!--success: function (data) {-->
                <!--$.each(data.data, function (i, item) {-->
                    <!--str += "<option value=" + item.cityName + ">" + item.cityName + "</option>";-->
                <!--});-->
                <!--$("#city2").append(str);-->
            <!--},-->
            <!--error: function () {-->
                <!--alert("Error市");-->
            <!--}-->
        <!--});-->
    <!--}-->

    <!--function CountryBind2() {-->
        <!--$("#country2").html("");-->
        <!--var options = $("#city2 option:selected");-->
        <!--var city = options.val();-->
        <!--if (city == "")-->
            <!--return;-->
        <!--$("#country2").html();-->
        <!--var str="<option> 请选择县 </option>";-->

        <!--$.ajax({-->
            <!--url: "/getCountries",-->
            <!--data: {"parentCity": city},-->
            <!--success: function (data) {-->
                <!--$.each(data.data, function (i, item) {-->
                    <!--str += "<option value=" + item.cityName + ">" + item.cityName + "</option>";-->
                <!--});-->
                <!--$("#country2").append(str);-->
            <!--}-->
        <!--});-->
    <!--}-->
<!--</script>-->

</body>
</html>